<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-remove="removeTab" @tab-click="tabclick">
      <el-tab-pane label="任务列表" name="1">
        <template v-if="activeName === '1'">
          <BaseValue></BaseValue>
        </template>
      </el-tab-pane>
      <el-tab-pane label="我的任务" name="2">
        <template v-if="activeName === '2'">
          <SubsetManagement ref="iscond"></SubsetManagement>
        </template>
      </el-tab-pane>
      <template v-if="tabIndex">
        <el-tab-pane label="任务详情" name="3" closable>
          <template v-if="activeName === '3'">
            <Detailed :rowObj="rowObj"></Detailed>
          </template>
        </el-tab-pane>
      </template>
      <template v-if="tabIndexChlidren">
        <el-tab-pane label="巡检设备明细" name="4" closable>
          <template v-if="activeName === '4'">
            <equipmentChlidren :rowObj="rowChlidren"></equipmentChlidren>
          </template>
        </el-tab-pane>
      </template>
      <template v-if="tabIndexJump">
        <el-tab-pane label="巡检路线" name="5" closable>
          <template v-if="activeName === '5'">
            <SelectJump :rowObj="JumpObj"></SelectJump>
          </template>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
import BaseValue from './basevalue/index.vue'
export default {
  name: "Record",
  components: {
    BaseValue,
    SubsetManagement: () => import('./subsetmanagement/index.vue'),
    Detailed: () => import('./basevalue/form/detailed.vue'),//详情
    equipmentChlidren: () => import('./equipmentChlidren/index.vue'),//设备详情
    SelectJump: () => import('./basevalue/form/SelectJump.vue'),//巡检路线
  },
  data () {
    return {
      activeName: '1',
      tabIndex: false,
      tabIndexChlidren: false,
      tabIndexJump: false,
      JumpObj: {},
      rowChlidren: {},
      rowObj: {}
    };
  },
  watch: {
    activeName (val) {
      if (val != '2') {
        if (this.$route.query.isCondition) {
          this.$route.query.isCondition = undefined
        }
      }
    }
  },
  computed: {
    isCondition: {
      get () {
        return this.$route.query.isCondition
      }
    },

  },
  created () {

    console.log(this.$store.state);
    if (this.isCondition == '2' || this.$store.state.user.isCondition == '2') {
      this.activeName = '2'
      let status = this.$route.query.status
      setTimeout(() => {
        console.log({ implementStatus: status && status || '0' });
        this.$refs['iscond'].handleQuery({ implementStatus: status && status || '0' });
      }, 500);
    }
  },
  methods: {
    tabclick () {
      if (this.activeName === '3' || this.activeName === '4' || this.activeName === '5') {
        return
      }
      this.tabIndex = false
      this.tabIndexChlidren = false
      this.tabIndexJump = false
      this.JumpObj = {}
      this.rowObj = {}
      this.rowChlidren = {}
    },
    removeTab (name) {
      if (name === '3') {
        this.tabIndex = false
      } else if (name === '4') { // '4'
        this.tabIndexChlidren = false
      } else {// '5'
        this.tabIndexJump = false
      }
      this.activeName = '1'
    },
    // addTab(row){
    //   this.tabIndex = true
    //   this.activeName = '3'
    //   this.rowObj = row
    // }
  }
};
</script>
